<template>
  <div>
    <el-drawer
      title="关联组详情"
      size="75%"
      :visible.sync="visible"
      :direction="direction"
      :append-to-body="true"
      :with-header="false"
      @closed="reset"
    >
      <div class="page">
        <div class="title">
          <div class="title-text">{{ temp.groupName }}({{ temp.groupCode }})</div>
        </div>
        <el-tabs v-model="activeTabName">
          <el-tab-pane label="基本信息" name="csmGroupBasic">
            <csmGroupBasic ref="csmGroupBasic" :temp="temp" />
          </el-tab-pane>
          <el-tab-pane label="变更历史" name="csmGroupHistory">
            <csmGroupHistory ref="csmGroupHistory" :group-code="temp.groupCode" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="bottom">
        <div class="btn-group">
          <div class="btns">
            <el-button v-permission="[20103, 4]" type="primary" @click="update()">编辑</el-button>
            <el-button v-permission="[20103, 5]" type="primary" @click="relevancyCsm()">关联客户</el-button>
            <el-button v-permission="[20103, 6]" type="primary" @click="remark()">备注</el-button>
          </div>
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <editCsmGroup ref="editCsmGroup" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
    <relevancyCsm ref="relevancyCsm" :group-type-map="groupTypeMap" :sub-type-all-list="subTypeAllList" />
    <remark ref="remark" />
    <csm-detail ref="csmDetail" />
  </div>
</template>

<script>
  import { formatColumnMap, parseTime } from '@/utils'
  import editCsmGroup from './editCsmGroup.vue'
  import relevancyCsm from './relevancyCsm.vue'
  import remark from './Remark.vue'
  import CsmDetail from '../../../components/CsmDetailModal/index.vue'
  import { mapGetters } from 'vuex'
  import csmGroupBasic from './csmGroupBasic.vue'
  import csmGroupHistory from './csmGroupHistory.vue'

  export default {
    components: {
      editCsmGroup, relevancyCsm, remark, CsmDetail, csmGroupBasic, csmGroupHistory
    },
    props: {
      groupTypeMap: {
        type: Array,
        default: () => []
      },
      csmTypeMap: {
        type: Array,
        default: () => []
      },
      csmStatusMap: {
        type: Array,
        default: () => []
      },
      subTypeAllList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        formatColumnMap,
        parseTime,
        visible: false,
        direction: 'rtl',
        groupInfo: {},
        activeTabName: 'csmGroupBasic',
        temp: {}
      }
    },
    computed: {
      ...mapGetters([
        'menusArr'
      ])
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            // console.log(temp)
            this.temp = temp
            const that = this
            this.$nextTick(() => {
              that.getDetail()
            })
          }
        })
      },
      getDetail() {
        this.$refs.csmGroupBasic.getDetail({
          csmStatusMap: this.csmStatusMap,
          groupTypeMap: this.groupTypeMap,
          customerTypeMap: this.csmTypeMap,
          subTypeAllList: this.subTypeAllList
        })
      },

      // 编辑
      async update() {
        await this.$refs.editCsmGroup.open(this.$refs.csmGroupBasic.groupInfo)
        this.getDetail()
      },
      // 关联客户
      async relevancyCsm() {
        await this.$refs.relevancyCsm.open(this.$refs.csmGroupBasic.groupInfo)
        this.getDetail()
      },
      // 备注
      async remark() {
        await this.$refs.remark.open(this.$refs.csmGroupBasic.groupInfo)
        this.getDetail()
      },
      reset() {
        this.activeTabName = 'csmGroupBasic'
      }
    }
  }
</script>

<style lang='scss' scoped>
.page {
  height: calc(100vh - 55px);
  padding: 20px;
  overflow-y: auto;
  .title {
    display: flex;
    margin-bottom: 10px;
    .title-text {
      line-height: 25px;
    }
    .tag {
      margin: 0 10px;
    }
  }
  /deep/ .el-descriptions__title {
    color: #38BDBD;
  }
  .table-title {
    padding-bottom: 10px;
    font-weight: 600;
    color: #38BDBD;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 75%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 10px;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
</style>
